今天是第八天我們可以寫一個javascript結合line bot網頁程式記帳管理系統，以下是我的程式碼

1. LINE Bot 設定

首先，需要去 LINE Developers Console 創建一個 LINE Messaging API 的專案，並取得你的 Channel Access Token 和 Channel Secret。

2. Node.js + Express + LINE SDK 設置

首先，在你的專案資料夾中初始化一個 Node.js 專案：

npm init -y

接著安裝所需的套件：

npm install express @line/bot-sdk body-parser

3. 建立 server.js

在專案目錄下建立一個 server.js 檔案，並添加以下程式碼：

const express = require('express');
const { Client, middleware } = require('@line/bot-sdk');
const bodyParser = require('body-parser');
const fs = require('fs');

// LINE Bot 設定
const config = {
    channelAccessToken: 'YOUR_CHANNEL_ACCESS_TOKEN',
    channelSecret: 'YOUR_CHANNEL_SECRET',
};

const app = express();
const client = new Client(config);

// 記帳資料
let records = [];

// 讀取已儲存的記帳資料
if (fs.existsSync('records.json')) {
    const data = fs.readFileSync('records.json');
    records = JSON.parse(data);
}

// Middleware for LINE Bot
app.use(middleware(config));

// 處理來自 LINE Bot 的訊息
app.post('/webhook', bodyParser.json(), (req, res) => {
    Promise
        .all(req.body.events.map(handleEvent))
        .then((result) => res.json(result))
        .catch((err) => {
            console.error(err);
            res.status(500).end();
        });
});

// 處理來自使用者的訊息
function handleEvent(event) {
    if (event.type !== 'message' || event.message.type !== 'text') {
        return Promise.resolve(null);
    }

    const userMessage = event.message.text;
    
    // 判斷訊息內容是否為記帳格式
    if (/^\d+/.test(userMessage)) {
        const amount = parseInt(userMessage.match(/\d+/)[0]);
        const category = userMessage.replace(/\d+/g, '').trim() || '未分類';

        const newRecord = { amount, category, date: new Date().toLocaleString() };
        records.push(newRecord);
        fs.writeFileSync('records.json', JSON.stringify(records, null, 2));

        const replyText = `記錄成功：${category} - $${amount}`;
        return client.replyMessage(event.replyToken, { type: 'text', text: replyText });
    } else if (userMessage === '查看記錄') {
        let replyText = '記帳記錄：\n';
        records.forEach((record, index) => {
            replyText += `${index + 1}. ${record.date} - ${record.category}: $${record.amount}\n`;
        });
        return client.replyMessage(event.replyToken, { type: 'text', text: replyText });
    }

    // 預設回覆訊息
    return client.replyMessage(event.replyToken, { type: 'text', text: '請輸入數字來記帳，或輸入「查看記錄」來查看記錄。' });
}

// 啟動伺服器
app.listen(3000, () => {
    console.log('伺服器運行於 http://localhost:3000');
});

4. 程式碼解說

1. 基本設定：
   我們使用 express 框架來建立伺服器，並使用 @line/bot-sdk 套件來與 LINE Bot API 互動。config 中設置了你的 channelAccessToken 和 channelSecret。

2. 處理訊息：
   當用戶傳送訊息至 LINE Bot，handleEvent 函數會判斷訊息內容。如果訊息包含數字，則會被視為一筆記帳紀錄，並儲存在 records 陣列中，並回傳確認訊息。用戶也可以傳送「查看記錄」來查看所有的記帳記錄。

3. 儲存資料：
   所有的記帳紀錄會存放在 records.json 檔案中。每次新增記錄時，都會更新這個 JSON 檔案。

5. 測試你的 LINE Bot

1. 啟動伺服器：

   node server.js
   

2. 設定 LINE Bot 的 Webhook URL 為 http://your-server-url/webhook（如果是在本地端測試，可以使用 ngrok 來生成一個公開的 URL）。

3. 開始與你的 LINE Bot 互動，輸入數字來記帳，或是輸入「查看記錄」來查看你所有的記帳記錄。

6. 後續擴展

1. 使用資料庫：你可以使用 MongoDB 或 MySQL 來替代 JSON 檔案儲存記錄。
2. 使用者分帳：可以將使用者 ID 與記帳記錄綁定，讓每個使用者擁有獨立的記帳記錄。
3. 分析功能：加入更多分析功能，像是每月支出、支出分類統計等。

server.js 程式碼解說

1. 引入必要的模組

const express = require('express');
const { Client, middleware } = require('@line/bot-sdk');
const bodyParser = require('body-parser');
const fs = require('fs');

這裡我們使用了四個模組：

• express: 這是 Node.js 上最流行的 Web 框架，用來建立伺服器。
• @line/bot-sdk: LINE Bot 的官方 SDK，用來與 LINE 平台進行互動。
• body-parser: 用來解析 HTTP 請求中的 JSON 資料，這對於處理來自 LINE Bot 的事件很重要。
• fs: 用來讀取和寫入檔案（在這裡我們會用來儲存記帳記錄）。

2. 設定 LINE Bot 的配置

const config = {
    channelAccessToken: 'YOUR_CHANNEL_ACCESS_TOKEN',
    channelSecret: 'YOUR_CHANNEL_SECRET',
};

這裡的 config 包含你的 LINE Bot 的通道存取金鑰 (channelAccessToken) 和 通道密鑰 (channelSecret)，你需要從 LINE Developers 平台獲取這些資訊來認證你的 LINE Bot。

3. 建立應用程式和 LINE Bot 客戶端

const app = express();
const client = new Client(config);

• app = express() 是用來建立一個 Express 應用程式，這將成為我們的伺服器。
• client = new Client(config) 用來建立與 LINE Bot API 進行通訊的客戶端，所有的訊息都會透過這個客戶端來傳送與接收。

4. 記帳資料處理

let records = [];

if (fs.existsSync('records.json')) {
    const data = fs.readFileSync('records.json');
    records = JSON.parse(data);
}

這部分處理記帳資料：

• records 是用來存放記帳紀錄的陣列。
• 如果伺服器啟動時已經有存在的 records.json 檔案，它會自動載入先前的記帳資料並解析成 JSON 物件。

5. 設置 LINE Bot 中介軟體

app.use(middleware(config));

這行程式碼設置了來自 LINE Bot 的 Webhook 請求的中介軟體，確保請求是合法的（來自 LINE 的伺服器），並解析出事件資料。

6. 設置 POST 路由來處理 Webhook 請求

app.post('/webhook', bodyParser.json(), (req, res) => {
    Promise
        .all(req.body.events.map(handleEvent))
        .then((result) => res.json(result))
        .catch((err) => {
            console.error(err);
            res.status(500).end();
        });
});

• 當 LINE Bot 傳送訊息時，它會透過 POST 請求觸發 /webhook 路由。
• bodyParser.json() 是用來解析請求中的 JSON 資料。
• req.body.events 包含所有來自 LINE 的事件（訊息、按鈕點擊等），每個事件都會被傳給 handleEvent 函數處理。

7. 處理每個事件

function handleEvent(event) {
    if (event.type !== 'message' || event.message.type !== 'text') {
        return Promise.resolve(null);
    }

這裡的邏輯處理每個來自 LINE 的事件：

• 我們只關心來自用戶的訊息，並且限定為 文字訊息 (event.message.type === 'text')。

8. 處理記帳訊息

const userMessage = event.message.text;
    
if (/^\d+/.test(userMessage)) {
    const amount = parseInt(userMessage.match(/\d+/)[0]);
    const category = userMessage.replace(/\d+/g, '').trim() || '未分類';

    const newRecord = { amount, category, date: new Date().toLocaleString() };
    records.push(newRecord);
    fs.writeFileSync('records.json', JSON.stringify(records, null, 2));

    const replyText = `記錄成功：${category} - $${amount}`;
    return client.replyMessage(event.replyToken, { type: 'text', text: replyText });
}

這裡判斷用戶是否傳送了一筆記帳訊息：

• 使用正規表達式 /^\d+/ 來判斷訊息中是否包含數字。如果訊息符合這個模式，則視為一筆記帳紀錄。
• amount 是訊息中的數字，表示消費金額。
• category 是訊息中數字之後的文字，表示消費類別（如果沒有指定，預設為「未分類」）。
• 接著將這筆記錄加入 records 陣列，並更新 records.json 檔案。
• 最後回傳一個成功的回覆訊息，通知用戶記帳成功。

9. 處理查看記錄的請求

else if (userMessage === '查看記錄') {
    let replyText = '記帳記錄：\n';
    records.forEach((record, index) => {
        replyText += `${index + 1}. ${record.date} - ${record.category}: $${record.amount}\n`;
    });
    return client.replyMessage(event.replyToken, { type: 'text', text: replyText });
}

當用戶傳送「查看記錄」時，會回傳所有的記帳紀錄：

• replyText 會拼接所有記帳紀錄，每條記錄包括日期、類別和金額。
• 透過 client.replyMessage 回傳訊息給用戶。

10. 預設回覆訊息

return client.replyMessage(event.replyToken, { type: 'text', text: '請輸入數字來記帳，或輸入「查看記錄」來查看記錄。' });

如果用戶輸入的訊息既不是記帳紀錄也不是「查看記錄」，則回傳一個預設的回覆，告訴用戶可以記帳或查看記錄。

11. 啟動伺服器

app.listen(3000, () => {
    console.log('伺服器運行於 http://localhost:3000');
});

這裡啟動伺服器並監聽 3000 埠。當伺服器啟動後，會在控制台輸出「伺服器運行於 http://localhost:3000」。

總結

這個程式的流程非常簡單：

1. 建立伺服器：使用 Express 來處理 HTTP 請求。
2. 與 LINE Bot 互動：當 LINE Bot 透過 Webhook 傳送事件給我們的伺服器，我們會判斷訊息並作出回應。
3. 記帳功能：可以透過文字訊息記錄消費金額和類別，並將這些紀錄保存到本地 JSON 檔案中。
4. 查看記錄：用戶可以查看他們的消費記錄，並透過 LINE Bot 回傳訊息給他們。